<template>
    <view class="comment-rate">
        <text class="star-title">评分</text>
        <view class="star-img-box">
            <image
                v-for="item in stars"
                :key="item.index"
                class="star-img"
                :src="item.index <= star ? '/static/img/evaluate-active.png' : '/static/img/evaluate-gray.png'"></image>
        </view>
        <text class="star-name">{{ getStarNameText() }}</text>
    </view>
</template>
<script>
import { getStarName } from "@/uni-sub-base/utils/utils.js"
export default {
    props: {
        star: {
            type: Number,
            default: true,
        },
    },
    data() {
        return {
            stars: [{ index: 1 }, { index: 2 }, { index: 3 }, { index: 4 }, { index: 5 }],
        }
    },
    mounted() {},
    methods: {
        getStarNameText() {
            return getStarName(this.star)
        },
    },
}
</script>

<style lang="scss">
.comment-rate {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-bottom: 20rpx;
    .star-title {
        color: $app-color-text-tip;
    }
    .star-img-box {
        display: flex;
        flex-direction: row;
        align-items: center;
        margin-left: 20rpx;
        .star-img {
            width: 32rpx;
            height: 32rpx;
            margin-right: 12rpx;
        }
    }
    .star-name {
        color: #ffa321;
    }
}
</style>
